﻿<template>
  <div>
    <!-- 下面是文本插值 -->
    <h2>文本插值示例</h2>
    <p>Message: {{ msg }}</p>

    <!-- 下面是原始 HTML -->
    <h2>原始 HTML 示例</h2>
    <p>Using text interpolation: {{ rawHtml }}</p>

    <!-- 下面是使用 v-html 指令 -->
    <h2>v-html 指令示例</h2>
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>
    <h2>标签显示与否示例</h2>
    <p v-if="showLabel">这是一个标签</p>
    <!-- 切换显示与否的按钮 -->
    <button @click="toggleLabel">切换显示</button>
    <!-- 下面是按钮组件 -->
    <h2>按钮组件示例</h2>
    <p><button :disabled="isButtonDisabled">Button</button></p>

    <!-- 下面是动态绑定多个值 -->
    <h2>动态绑定多个值示例</h2>
    <div v-bind="objectOfAttrs"></div>

    <!-- 下面是使用 JavaScript 表达式 -->
    <h2>JavaScript 表达式示例</h2>
    <p>{{ number + 1 }}</p>
    <p>{{ ok ? 'YES' : 'NO' }}</p>
    <p>{{ message.split('').reverse().join('') }}</p>
    <div :id="`list-${id}`"></div>

    <!-- 下面是调用函数 -->
    <h2>调用函数示例</h2>
    <time :title="toTitleDate(date)" :datetime="date">
      {{ formatDate(date) }}
    </time>

    <!-- 下面是条件渲染 -->
    <h2>条件渲染示例</h2>
    <p v-if="seen">现在你能看见我</p>

    <!-- 下面是动态参数 -->
    <h2>动态参数示例</h2>
    <a :[attributeName]="url"> ... </a>

    <!-- 下面是修饰符 -->
    <h2>修饰符示例</h2>
    <form @submit.prevent="onSubmit">...</form>

    <!-- 下面是绑定图片示例 -->
    <h2>绑定图片示例</h2>
    <img :src="imageUrl" alt="Vue Logo">
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 文本插值数据
      msg: 'Hello, Vue!',

      // 原始 HTML 数据
      rawHtml: '<span style="color: red;">This should be red.</span>',

      // 是否禁用按钮
      isButtonDisabled: false,

      // 动态绑定多个值的对象
      objectOfAttrs: {
        id: 'container',
        class: 'wrapper'
      },

      // 使用 JavaScript 表达式的数据
      number: 10,
      ok: true,
      message: 'Hello',
      id: 'myId',
      date: new Date(),
      attributeName: 'href',
      url: 'https://www.example.com',

      // 是否显示条件渲染的消息
      seen: true,

      // 图片 URL
      imageUrl: 'https://vuejs.org/images/logo.png'
    };
  },
  methods: {
    // 调用函数：格式化日期
    formatDate(date) {
      return date.toLocaleString();
    },
    toggleLabel() {
      this.showLabel = !this.showLabel;},
    // 调用函数：将日期转换为标题
    toTitleDate(date) {
      return date.toDateString();
    },
    // 表单提交事件处理
    onSubmit(event) {
      // 阻止表单默认提交行为
      event.preventDefault();
      // 表单提交逻辑
    }
  }
};
</script>
<style scoped>
h2 {
  color: red;
}
</style>
